import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image } from "@tarojs/components";

class TaskInfoHead extends Component {
  render() {
    const { info, staticUri } = this.props;
    return (
      <View className="task-head">
        <View className="task-con">
          <View style="padding:10px;width:128px;height:92px;">
            <Image style="width:100%;height:100%;" src={staticUri + info.img} />
          </View>
          <View className="task-info-con">
            <View className="info-con">
              <View className="title-con">
                <View className="task-title">{info.name}</View>
              </View>
              <View className="task-payment">
                <Text style="font-size:14px;">结算方式</Text>
                <View
                  className={
                    info.type === 1
                      ? `payment-status yy-color`
                      : info.type === 2
                      ? `payment-status cj-color`
                      : "payment-status fx-color"
                  }
                >
                  {info.type === 1
                    ? "邀约赚钱"
                    : info.type === 2
                    ? "成交赚钱"
                    : "分享赚钱"}
                </View>
              </View>
              <View className="task-money-con">
                <View className="task-permoney">
                  {info.type === 2 && (
                    <Text style="font-size: 13px;color: #333333;">
                      {info.permoney > 10000
                        ? info.permoney / 10000 + "万元"
                        : info.permoney + "元"}
                    </Text>
                  )}
                  {info.type === 3 && (
                    <Text style="font-size: 13px;color: #666666;">
                      剩余佣金{info.lastbudget}元
                    </Text>
                  )}
                </View>
                <View>
                {info.type === 3 && (
                  <View className="task-info-click">
                    <Text style="color:#FAA24B;">{info.permoney}元</Text>
                    /点击
                  </View>
                  )}
                  {(info.type === 1 || info.type === 2) && (
                     <Text style="font-size:18px;color:#FAA24B">
                     佣金
                     {info.type === 1
                       ? info.permoney + "元"
                       : (info.perrate * 100) + "%"}
                   </Text>
                  )}
                </View>
              </View>
            </View>
          </View>
          {/* <Image className="task-img" src={staticUri + info.img} /> */}
          {/* <View className="task-info-con">
            <View className="info-con">
              <View className="title-con">
                <View className="task-title"></View>
                {info.type === 3 && (
                  <View className="task-info-click">
                    <Text style="color:#FAA24B;">{info.permoney}元</Text>
                    /点击
                  </View>
                )}
              </View>
              <View className="task-permoney">
                {info.type === 2 && (
                  <Text style="font-size: 13px;color: #333333;">
                    {info.permoney > 10000 ? info.permoney / 10000 + "万元" : info.permoney + '元' }
                  </Text>
                )}
                {info.type === 3 && (
                  <Text style="font-size: 13px;color: #666666;">
                    剩余佣金{info.lastbudge}元
                  </Text>
                )}
              </View>
              <View className="task-payment">
                <Text style="font-size:14px;">结算方式</Text>
                <View
                  className={
                    info.type === 1
                      ? `payment-status yy-color`
                      : info.type === 2
                      ? `payment-status cj-color`
                      : "payment-status fx-color"
                  }
                >
                  {info.type === 1
                    ? "邀约赚钱"
                    : info.type === 2
                    ? "成交赚钱"
                    : "分享赚钱"}
                </View>

                <View className="task-commison">
                  {info.type === 3 && (
                    <Text style="font-size:13px;color:#666666;">截止日期：{info.etime.substring(0, 10)}</Text>
                )
                   }
                  {(info.type === 1 || info.type === 2) && (
                     <Text style="font-size:18px;color:#FAA24B">
                     佣金
                     {info.type === 1
                       ? info.permoney + "元"
                       : info.perrate + "%"}
                   </Text>
                  )}
                </View>
              </View>
            </View> */}
          {/* </View> */}
        </View>
        {/* <View className="task-con">
          <Image className="task-head-img" src={staticUri + info.img} />
          <View className="task-title-info">
            <View className="task-title-con">
              <View className="task-title">{info.name}</View>
              {info.type === 3 && (
                <View className="task-info-click">
                  <Text style="font-size:14px;color:#FAA24B;">
                    {info.permoney}元
                  </Text>
                  /点击
                </View>
              )}
            </View>

            {info.type === 3 && [
              <View className="task-info-item">
                <View className="task-info-balance">
                  剩余佣金{info.lastbudget}元
                </View>
              </View>,
              <View className="task-info-item">
                <View className="task-info-etime">
                  截止日期：{info.etime.substring(0, 10)}
                </View>
              </View>
            ]}
            {(info.type === 1 || info.type === 2) && (
              <View className="task-money">
                <Text style="font-size: 13px;color: #333333;">
                  {info.type === 2 && info.permoney / 10000 + "万元"}
                </Text>
                <Text
                  style={{
                    "margin-left": info.type === 2 ? "10px" : "0px",
                    "font-size": "12px",
                    color: "#FAA24B"
                  }}
                >
                  佣金
                </Text>
                <Text style="font-size:16px;color:#FAA24B">
                  {info.type === 1 ? info.permoney + "元" : info.perrate + "%"}
                </Text>
              </View>
            )}
          </View>
        </View> */}
      </View>
    );
  }
}
export default TaskInfoHead;
